<template>
  <div class="echartsDiv">
    <!-- <div style="padding: 24px 0px 24px 0px;width: 500px;background-color: rgb(243,243,243);display: flex;align-items: center;">
      <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
        <div>目标完成率</div>
        <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.targetCompletionRate }}%</div>
      </div>
      <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
        <div>累计进入</div>
        <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.accumulatedEntry }}%</div>
      </div>
      <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
        <div>累计触发</div>
        <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.cumulativeTriggering }}%</div>
      </div>
      <div style="width: 25%;line-height: 24px;padding-left: 24px;">
        <div>目标完成</div>
        <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.goalCompletion }}%</div>
      </div>
    </div> -->
    <div style="font-weight: 700; font-size: 16px; width: auto">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-document">策略执行趋势统计</span>
        </div>
        <div>
          <!-- rgb(10,17,60) -->
          <div
            v-if="echartsData.length != 0"
            style="display: flex; flex-wrap: wrap; align-items: center"
          >
            <div
              v-for="(item, index) in echartsData"
              :key="myCharts"
              :id="item.nodeName + '_' + index"
              style="
                width: 400px;
                height: 300px;
                /* background-color:	#191970; */
                border-radius: 20px;
                margin-right: 12px;
                padding-top: 12px;
              "
            ></div>
          </div>
          <div
            v-else
            style="
              line-height: 60px;
              width: 100%;
              text-align: center;
              color: #909399;
              font-size: 14px;
              font-weight: 500;
            "
          >
            暂无数据
          </div>
        </div>
      </el-card>
    </div>
    <div class="tableDatacolumn" style="margin-top: 24px">
      <el-card class="box-card" style="min-height: calc(100vh - 480px)">
        <div slot="header" class="clearfix">
          <span class="el-icon-document">策略执行趋势列表</span>
        </div>
        <div>
          <el-table :data="tableData" style="width: 100%" :max-height="450">
            <el-table-column
              prop="nodeName"
              align="left"
              label="节点名称"
            ></el-table-column>
            <el-table-column
              prop="buryingPointName"
              align="left"
              label="埋点名称"
            ></el-table-column>
            <el-table-column
              prop="targetCompletionRate"
              align="center"
              label="完成率"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.targetCompletionRate || 0 }}%</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="completeCount"
              align="center"
              label="完成(人次)"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.completeCount || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalCount" align="center" label="总人次">
              <template slot-scope="scope">
                <span>{{ scope.row.totalCount || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  name: "strategyStatisticsD",
  data() {
    return {
      strategyInstanceId: "",
      detailTopData: {
        targetCompletionRate: 0, // 目标，
        accumulatedEntry: 0, // 进
        cumulativeTriggering: 0, //触发
        goalCompletion: 0, // 完成
      },
      echartsData: [],
      tableData: [],
      myCharts: Math.random(),
    };
  },
  created() {
    if (this.$route.query && this.$route.query.strategyInstanceId) {
      this.strategyInstanceId = this.$route.query.strategyInstanceId;
      this.getecharts();
    }
  },
  methods: {
    async getecharts() {
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/strategy/queryStrategyInstanceById",
          {
            strategyInstanceId: this.strategyInstanceId,
          }
        );
        if (response.data.strategyBuryingPointDTOList) {
          this.tableData = response.data.strategyBuryingPointDTOList;
        }
        if (response.data.strategyTargetInfoDTOS) {
          this.echartsData = response.data.strategyTargetInfoDTOS;
        }
        if (response.data.strategyInstanceDTO) {
          if (response.data.strategyInstanceDTO.targetCompletionRate) {
            this.detailTopData.targetCompletionRate =
              response.data.strategyInstanceDTO.targetCompletionRate || 0;
          }
          if (response.data.strategyInstanceDTO.accumulatedEntry) {
            this.detailTopData.accumulatedEntry =
              response.data.strategyInstanceDTO.accumulatedEntry || 0;
          }
          if (response.data.strategyInstanceDTO.cumulativeTriggering) {
            this.detailTopData.cumulativeTriggering =
              response.data.strategyInstanceDTO.cumulativeTriggering || 0;
          }
          if (response.data.strategyInstanceDTO.goalCompletion) {
            this.detailTopData.goalCompletion =
              response.data.strategyInstanceDTO.goalCompletion || 0;
          }
        }

        this.$nextTick(() => {
          this.echartsData.forEach((element, index) => {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(
              document.getElementById(element.nodeName + "_" + index)
            );
            let data_ = [];
            let seriesdata = [];
            let totalFlags = [];
            element.strategyInstanceNodeDTOList.forEach((ele) => {
              totalFlags.push(
                Number(JSON.parse(ele.extraJson).statisticsNodeInfo.总人数)
              );
              data_.push(ele.nodeName);
              //  Number(JSON.parse(ele.extraJson).statisticsNodeInfo.总人数)
              seriesdata.push({
                value:
                  Number(JSON.parse(ele.extraJson).statisticsNodeInfo.总人数) ||
                  0,
                otherdata: ele,
              });
            });
            let chartData = {
              title: {
                text:
                  element.nodeName +
                  "  " +
                  "达成率" +
                  (element.extraJson
                    ? JSON.parse(element.extraJson).targetCompletionRate
                      ? JSON.parse(element.extraJson).targetCompletionRate
                      : "0"
                    : "0") +
                  "%",
                left: "center",
                textStyle: {
                  color: "#11A983",
                  fontSize: 14,
                  fontWeight: "bold",
                },
                // subtext: '单位：人',
                // subtextStyle: {
                //   fontWeight: 'bold'
                // }
              },
              tooltip: {
                trigger: "axis",
                axisPointer: { type: "shadow" },
                // 自定义提示框样式
                textStyle: {
                  // color: '#303133' // 文字颜色
                },
                backgroundColor: "rgba(255, 255, 255, 0.7)", // 提示框背景颜色
                borderColor: "#9FDCC5", // 提示框边框颜色
                borderWidth: 1, // 提示框边框宽度
                formatter: function (params) {
                  console.log(JSON.stringify(params), "dfhfghjgjk111");
                  let topDiv = null;
                  topDiv = `<div style="font-weight:700;font-size:13px">节点名称：${
                    params[0].data.otherdata.nodeName
                  }</div>
                    <div style="font-weight:700;font-size:13px">总人数：${
                      JSON.parse(params[0].data.otherdata.extraJson)
                        .statisticsNodeInfo.总人数
                    }人</div>
                    <div style="font-weight:500;font-size:12px;margin-top:8px">1. 报名人数：${
                      JSON.parse(params[0].data.otherdata.extraJson)
                        .statisticsNodeInfo.报名人数
                    }人</div>
                    <div style="font-weight:500;font-size:12px">2. 参与人数：${
                      JSON.parse(params[0].data.otherdata.extraJson)
                        .statisticsNodeInfo.完成活动
                    }人</div>
                    <div style="font-weight:500;font-size:12px">3. 完成活动：${
                      JSON.parse(params[0].data.otherdata.extraJson)
                        .statisticsNodeInfo.完成活动
                    }人</div>
                    <div style="font-weight:500;font-size:12px">4. 填写问卷：${
                      JSON.parse(params[0].data.otherdata.extraJson)
                        .statisticsNodeInfo.填写问卷
                    }人</div>
                    `;
                  return topDiv;
                },
              },
              xAxis: {
                type: "category",
                name: "节点",
                data: data_,
                axisLine: {
                  lineStyle: {
                    color: "#11A983",
                    with: 1,
                    type: "solid",
                  },
                },
              },
              yAxis: {
                type: "value",
                name: "单位：人",
                axisLine: {
                  lineStyle: {
                    color: "#11A983",
                    with: 1,
                    type: "solid",
                  },
                },
              },
              series: [
                {
                  type: "bar",
                  data: seriesdata,
                  barWidth: 50,
                  itemStyle: {
                    // color: function (params) {
                    //   // 根据params的
                    //   const colorsMap = [
                    //       '#0E8AE6',
                    //       '#59CEE4',
                    //       '#8C77F3',
                    //       '#F6736F',]
                    //     return colorsMap[params.dataIndex];
                    // },
                    color: function (params) {
                      //不同颜色
                      var colorList = [
                        "#50E9C8",
                        "#F03869",
                        "#AC91DF",
                        "#F3CE30",
                        "#31B5EC",
                        "#D96C70",
                      ];
                      return colorList[params.dataIndex];
                    },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        //渐变色
                        offset: 0,
                        color: "#11A983",
                      },
                      {
                        offset: 1,
                        color: "#F0F9EB",
                      },
                    ]),
                    barBorderRadius: [20, 20, 0, 0],
                  },
                },
              ],
            };
            const totalFlag = totalFlags.every((item) => {
              return !item;
            });
            if (totalFlag) {
              // chartData.yAxis.type = "category";
              // chartData.yAxis.data = [100, 200, 300, 400, 500];
              chartData.yAxis.axisLabel = {
                formatter: function (value) {
                  return value * 500;
                },
              };
            } else {
              // chartData.yAxis.type = "value";
              // chartData.yAxis.data && delete chartData.yAxis.data;
              chartData.yAxis.axisLabel && delete chartData.yAxis.axisLabel;
            }
            // 绘制图表
            myChart.setOption(chartData);
          });
        });
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsDiv {
  padding: 20px;
}
::v-deep .el-card__body {
  padding: 10px !important;
}
</style>
